import { create } from "zustand";
import ContainerDev from "../components/Material/Container/dev";
import ButtonDev from "../components/Material/Button/dev";
import PageDev from "../components/Material/Page/dev";

import ContainerProd from "../components/Material/Container/prod";
import ButtonProd from "../components/Material/Button/prod";
import PageProd from "../components/Material/Page/prod";

/* 
组件的各种属性
- name 是字段名
- label 是前面的文案
- type 是表单类型
*/
export interface ComponentSetter {
	name: string;
	label: string;
	type: string;
	[key: string]: any;
}

/* 
组件事件绑定
*/
export interface ComponentEvent {
    name:string;
    label:string;
}


/* 
- name: 组件名称。
- defaultProps: 组件的默认属性，用 Record<string, any> 表示，支持任意键值对类型。
- component: 具体的组件对象引用，用于在运行时动态渲染该组件。
*/
export interface ComponentConfig {
	name: string;
	defaultProps: Record<string, any>;
	desc: string;
	setter?: ComponentSetter[];
    stylesSetter?:ComponentSetter[];
    events?:ComponentEvent[];
    dev:any;
    prod:any
}

// componentConfig: 是一个对象，键为组件名称，值为 ComponentConfig 对象，表示注册的组件和其配置信息。
interface State {
	componentConfig: { [key: string]: ComponentConfig };
}

// registerComponent: 用于动态注册新的组件配置。
interface Action {
	registerComponent: (name: string, componentConfig: ComponentConfig) => void;
}

/* 
管理一个组件注册表，存储和管理预定义组件的配置信息。这种设计适用于一个动态页面或表单构建器，允许注册和使用不同的组件。
*/

export const useComponentConfigStore = create<State & Action>((set) => ({
	/* 
    初始状态中，注册了两个组件配置：
    - Container: 使用默认的空 defaultProps。
    - Button: 带有两个默认属性 type: "primary" 和 text: "按钮"。
    */
	componentConfig: {
		Container: {
			name: "Container",
			defaultProps: {},
			desc: "容器",
            dev:ContainerDev,
            prod:ContainerProd
		},
		Button: {
			name: "Button",
			defaultProps: {
				type: "primary",
				text: "按钮",
			},
			desc: "按钮",
            dev:ButtonDev,
            prod:ButtonProd,
			setter: [
				{
					name: "type",
					label: "按钮类型",
					type: "select",
					options: [
						{ label: "主按钮", value: "primary" },
						{ label: "次按钮", value: "default" },
					],
				},
				{
					name: "text",
					label: "文本",
					type: "input",
				},
			],
            stylesSetter: [
                {
                    name: 'width',
                    label: '宽度',
                    type: 'inputNumber',
                },
                {
                    name: 'height',
                    label: '高度',
                    type: 'inputNumber',
                }
            ],
            events:[
                {
                    name: 'onClick',
                    label: '点击事件',
                },
                {
                    name: 'onDoubleClick',
                    label: '双击事件'
                },
            ]
		},
		Page: {
			name: "Page",
			defaultProps: {},
            dev:PageDev,
            prod:PageProd,
			desc: "页面",
		},
	},
	/*
    允许动态注册新的组件配置
    - 通过 name 和 componentConfig 参数注册新组件。
    - 使用 set 方法更新 componentConfig，在原有的 componentConfig 基础上添加或更新指定 name 的配置。
    - 这样设计使得组件配置可以灵活扩展，不必在 store 初始化时预定义所有组件。
    */
	registerComponent: (name, componentConfig) =>
		set((state) => {
			return {
				...state,
				componentConfig: {
					...state.componentConfig,
					[name]: componentConfig,
				},
			};
		}),
}));
